<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色</title>
    <jsp:include page="/common/backend_common.jsp"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/ztree/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/assets/css/bootstrap-duallistbox.min.css" type="text/css">
    <script type="text/javascript" src="<%=request.getContextPath()%>/ztree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/assets/js/jquery.bootstrap-duallistbox.min.js"></script>
    <style type="text/css">
        .bootstrap-duallistbox-container .moveall, .bootstrap-duallistbox-container .removeall {
            width: 50%;
        }
        .bootstrap-duallistbox-container .move, .bootstrap-duallistbox-container .remove {
            width: 49%;
        }
    </style>
</head>
<body>
<input id="gritter-light" checked="" type="checkbox" class="ace ace-switch ace-switch-5"/>
<div class="page-header">
    <h1>
        角色管理
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            维护角色与用户, 角色与权限关系
        </small>
    </h1>
</div>
<div class="main-content-inner">
    <div class="col-sm-3">
        <div class="table-header">
            角色列表&nbsp;&nbsp;
            <a class="green" href="#">
                <i class="ace-icon fa fa-plus-circle orange bigger-130 role-add"></i>
            </a>
        </div>
        <div id="roleList"></div>
    </div>
    <div class="col-sm-9">
        <div class="tabbable" id="roleTab">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a data-toggle="tab" href="#roleAclTab">
                        角色与权限
                    </a>
                </li>
                <li>
                    <a data-toggle="tab" href="#roleUserTab">
                        角色与用户
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="roleAclTab" class="tab-pane fade in active">
                    <ul id="roleAclTree" class="ztree"></ul>
                    <button class="btn btn-info saveRoleAcl" type="button">
                        <i class="ace-icon fa fa-check bigger-110"></i>
                        保存
                    </button>
                </div>

                <div id="roleUserTab" class="tab-pane fade" >
                    <div class="row">
                        <div class="box1 col-md-6">待选用户列表</div>
                        <div class="box1 col-md-6">已选用户列表</div>
                    </div>
                    <select multiple="multiple" size="10" name="roleUserList" id="roleUserList" >
                    </select>
                    <div class="hr hr-16 hr-dotted"></div>
                    <button class="btn btn-info saveRoleUser" type="button">
                        <i class="ace-icon fa fa-check bigger-110"></i>
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialog-role-form" style="display: none;">
    <form id="roleForm">
        <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
            <tr>
                <td><label for="roleName">名称</label></td>
                <td>
                    <input type="text" name="name" id="roleName" value="" class="text ui-widget-content ui-corner-all">
                    <input type="hidden" name="id" id="roleId"/>
                </td>
            </tr>
            <tr>
                <td><label for="roleStatus">状态</label></td>
                <td>
                    <select id="roleStatus" name="status" data-placeholder="状态" style="width: 150px;">
                        <option value="1">可用</option>
                        <option value="0">冻结</option>
                    </select>
                </td>
            </tr>
            <td><label for="roleRemark">备注</label></td>
            <td><textarea name="remark" id="roleRemark" class="text ui-widget-content ui-corner-all" rows="3" cols="25"></textarea></td>
            </tr>
        </table>
    </form>
</div>
<script id="roleListTemplate" type="x-tmpl-mustache">
<ol class="dd-list ">
    {{#roleList}}
        <li class="dd-item dd2-item role-name" id="role_{{id}}" href="javascript:void(0)" data-id="{{id}}">
            <div class="dd2-content" style="cursor:pointer;">
            {{name}}
            <span style="float:right;">
                <a class="green role-edit" href="#" data-id="{{id}}" >
                    <i class="ace-icon fa fa-pencil bigger-100"></i>
                </a>
                &nbsp;
                <a class="red role-delete" href="#" data-id="{{id}}" data-name="{{name}}">
                    <i class="ace-icon fa fa-trash-o bigger-100"></i>
                </a>
            </span>
            </div>
        </li>
    {{/roleList}}
</ol>
</script>

<script id="selectedUsersTemplate" type="x-tmpl-mustache">
{{#userList}}
    <option value="{{id}}" selected="selected">{{username}}</option>
{{/userList}}
</script>

<script id="unSelectedUsersTemplate" type="x-tmpl-mustache">
{{#userList}}
    <option value="{{id}}">{{username}}</option>
{{/userList}}
</script>

<script type="text/javascript">
    $(function(){
        var roleMap = {};
        var lastRoleId = -1;
        var selectFirstTab =  true;
        var hasMultiSelect = false;

        // 获取模板，渲染
        var roleListTemplate = $('#roleListTemplate').html();
        Mustache.parse(roleListTemplate);

        // 选中用户模板
        var selectedUsersTemplate = $('#selectedUsersTemplate').html();
        Mustache.parse(selectedUsersTemplate);

        // 未选中用户模板
        var unSelectedUsersTemplate = $('#unSelectedUsersTemplate').html();
        Mustache.parse(unSelectedUsersTemplate);
        // 加载角色列表
        loadRoleList();

        // zTree
        <!-- 树结构相关 开始-->
        var zTreeObj = [];
        var modulePrefix = 'm_';
        var aclPrefix = 'a_';
        var nodeMap = {};

        var setting = {
            check: {
                enable: true,
                chkDisabledInherit: true,
                chkboxType: {"Y": "ps", "N": "ps"}, //auto check 父节点 子节点
                autoCheckTrigger: true
            },
            data: {
                simpleData: {
                    enable: true,
                    rootPId: 0
                }
            },
            callback: {
                // 指定单击事件
                onClick: onClickTreeNode
            }
        };

        // 绑定单击事件
        function onClickTreeNode(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("roleAclTree");
            zTree.expandNode(treeNode);
        }

        function loadRoleList() {
            $.ajax({
                url : getDomain() + '/sys/role/list.json',
                success : function(result) {
                    if (result.ret) {
                        // 渲染
                        var rendered = Mustache.render(roleListTemplate,{roleList : result.data});
                        $('#roleList').html(rendered);

                        // 绑定点击事件
                        bindRoleClick();
                        // 遍历获取的结果，获取角色列表，存在roleMap中，供全局使用
                        $.each(result.data,function(i,role){
                            roleMap[role.id] = role;
                        })
                    } else {
                        showMessage("加载角色列表",result.msg,false);
                    }
                }
            });
        }

        // 绑定点击事件
        function bindRoleClick() {
            // 点击修改按钮
            $('.role-edit').click( function(e) {
                e.preventDefault();
                e.stopPropagation();
                // 获取roleId
                var roleId = $(this).attr('data-id');

                $('#dialog-role-form').dialog({
                    modal : true,
                    title : '修改角色',
                    open : function (event ,ui) {
                        $('.ui-dialog-titlebar-close',$(this).parent()).hide();
                        $('#roleForm')[0].reset();
                        // 给修改页面赋值
                        var targetRole = roleMap[roleId];
                        if (targetRole) {
                            $('#roleId').val(roleId);
                            $('#roleName').val(targetRole.name);
                            $('#roleStatus').val(targetRole.status);
                            $('#roleRemark').val(targetRole.remark);
                        }
                    },
                    buttons : {
                        '修改' : function (e) {
                            e.preventDefault();
                            updateRole(false, function(data){
                                $('#dialog-role-form').dialog('close');
                                showMessage("修改角色","操作成功",true);
                            },function (data){
                                showMessage("修改角色",data.msg,false);
                            });
                        },
                        '取消' : function (e) {
                            $('#dialog-role-form').dialog('close');
                        },
                    }
                });
            })

            // 点击名称就可以修改
            $('.role-name').click(function(e) {
                e.preventDefault();
                e.stopPropagation();
                var roleId = $(this).attr('data-id');
                // 处理
                handleRoleSelected(roleId);
            })
        }

        // 处理选中的roleId
        function handleRoleSelected(roleId){
            if (lastRoleId != -1) {
                // 获取上次选中的元素
                var lastRole = $("#role_" + lastRoleId  + " .dd2-content:first");
                lastRole.removeClass("btn-yellow");
                lastRole.removeClass("no-hover");
            }

            // 当前选中的样式
            var currentRole =  $("#role_" + roleId  + " .dd2-content:first");
            currentRole.addClass("btn-yellow");
            currentRole.addClass("no-hover");

            // 更新roleId
            lastRoleId = roleId;

            // 加载tab页
            if (selectFirstTab) {
                loadRoleAcl(roleId);
            }
        }

        // 获取点击的trigger
        $("#roleTab a:first").trigger('click');

        // 加载角色权限
        function loadRoleAcl(selectedRoleId) {
            if (selectedRoleId == -1) {
                return ;
            }

            $.ajax({
                url : getDomain() + '/sys/role/roleTree.json',
                data : {
                    roleId : selectedRoleId
                },
                type : 'post',
                success : function (result) {
                    if (result.ret) {
                        // 渲染返回的数据
                        renderRoleTree(result.data);
                    } else {
                        showMessage("加载角色权限数据",result.msg,false);
                    }
                }
            })
        }

        // 获取当前节点选中的id
        function getTreeSelectedId() {
            var treeObj = $.fn.zTree.getZTreeObj("roleAclTree");
            var nodes = treeObj.getCheckedNodes(true);
            var v = "";
            for (var i =0;i<nodes.length;i++){
                if (nodes[i].id.startsWith(aclPrefix)) {
                    v +="," + nodes[i].dataId;
                }
            }
            // 移除第一个,
            return v.length > 0 ? v.substring(1) : v;
        }

        // 渲染返回的角色权限树的数据
        function renderRoleTree (aclModuleList) {
            // 每次使用前清空数据
            zTreeObj = [];
            // 递归
            recursivePrepareTreeData(aclModuleList);
            // 处理nodemap数据
            for (var key in  nodeMap) {
                zTreeObj.push(nodeMap[key]);
            }

            // 渲染ztree数据节点
            $.fn.zTree.init($('#roleAclTree'),setting,zTreeObj);
        }

        // 递归
        function recursivePrepareTreeData (aclModuleList){
            // 判断有无数据
            if (aclModuleList && aclModuleList.length > 0) { // 有数据，进行遍历
                // 遍历
                $(aclModuleList).each(function(i,aclModule){
                    var hasChecked = false;
                    // 判断当前权限模块下是否有权限带你
                    if (aclModule.aclList && aclModule.aclList.length> 0 ) {
                        // 遍历权限点
                        $(aclModule.aclList).each(function (i,acl){
                           zTreeObj.push({
                               id : aclPrefix + acl.id,
                               pId : modulePrefix + acl.aclModuleId,
                               name : acl.name + ((acl.type == 1 ) ? '(菜单)' : ''),
                               chkDisabled : !acl.hasAcl,
                               checked : acl.checked,
                               dataId : acl.id
                           });
                            if (acl.checked) {
                                hasChecked = true;
                            }
                        });
                    }
                    // 判断是否有子模块,同时是否有权限点
                    if ((aclModule.aclModuleList && aclModule.aclModuleList.length > 0) ||
                            (aclModule.aclList && aclModule.aclList.length > 0) ){
                        nodeMap[modulePrefix + aclModule.id] = {
                            id : modulePrefix + aclModule.id,
                            pId : modulePrefix + aclModule.parentId,
                            name : aclModule.name,
                            open : hasChecked
                        };

                        // 递归上级
                        var tempAclModule = nodeMap[modulePrefix + aclModule.id];
                        while (hasChecked && tempAclModule) {
                            if (tempAclModule) {
                                nodeMap[tempAclModule.id] = {
                                    id : tempAclModule.id,
                                    pId : tempAclModule.pId,
                                    name :tempAclModule.name,
                                    open : true
                                }
                            }
                            // 返回上一层
                            tempAclModule = nodeMap[tempAclModule.pId];
                        }
                    }
                    // 递归下一层
                    recursivePrepareTreeData(aclModule.aclModuleList);
                });
            }
        }

        // 角色新增功能
        $('.role-add').click( function() {
            $('#dialog-role-form').dialog({
                modal : true,
                title : '新增角色',
                open : function (event ,ui) {
                    $('.ui-dialog-titlebar-close',$(this).parent()).hide();
                    $('#roleForm')[0].reset();
                },
                buttons : {
                    '添加' : function (e) {
                        e.preventDefault();
                        updateRole(true, function(data){
                            $('#dialog-role-form').dialog('close');
                        },function (data){
                            showMessage("新增角色",data.msg,false);
                        });
                    },
                    '取消' : function (e) {
                        $('#dialog-role-form').dialog('close');
                    },
                }
            });
        })

        // 保存角色对应的权限
        $('.saveRoleAcl').click(function (e){
            e.preventDefault();
            // 判断roleId
            if (lastRoleId == -1 ) {
                showMessage("保存角色与权限点的关系","请在左侧选择需要操作的角色",false);
                return;
            }

            $.ajax({
                url : getDomain() + '/sys/role/changeAcls.json',
                data : {
                    roleId : lastRoleId,
                    aclIds : getTreeSelectedId()
                },
                type : 'post',
                success : function (result) {
                    if (result.ret) {
                        showMessage("保存角色与权限点的关系","操作成功",false);
                    } else {
                        showMessage("保存角色与权限点的关系",result.msg,false);
                    }
                }
            });
        });

        function updateRole (isCreate,successCallback,failCallback) {
            $.ajax({
                url : isCreate ? getDomain() + '/sys/role/save.json' : getDomain() + '/sys/role/update.json',
                data : $('#roleForm').serializeArray(),
                type : 'post',
                success : function(result) {
                    if(result.ret) {
                        // 成功，重新渲染角色
                        loadRoleList();
                        if(successCallback) {
                            successCallback(result);
                        }
                    } else {
                        if (failCallback) {
                            failCallback(result);
                        }
                    }
                }

            });
        }


        // tab页的切换
        $("#roleTab a[data-toggle='tab']").on("shown.bs.tab",function(e){
            if (lastRoleId == -1) {
                showMessage("加载角色关系","请先在左侧选择操作的角色",false);
                return;
            }

            // 判断当前点击事件的对应属性
            if (e.target.getAttribute("href") == "#roleAclTab") {
                selectFirstTab = true;
                loadRoleAcl(lastRoleId);
            } else {
                selectFirstTab = false;
                loadRoleUser(lastRoleId);
            }
        });

        // 角色用户tab页内容的加载
        function loadRoleUser(selectedRoleId) {
            $.ajax({
                url : getDomain() + '/sys/role/users.json',
                data : {
                    roleId : selectedRoleId
                },
                type : 'post',
                success : function(result) {
                    if (result.ret) {
                        // 渲染
                        var renderedSelect = Mustache.render(selectedUsersTemplate,{userList:result.data.selected});
                        var renderedUnSelect = Mustache.render(unSelectedUsersTemplate,{userList:result.data.unselected});
                        // 放入页面(option)
                        $("#roleUserList").html(renderedSelect + renderedUnSelect);
                        // 多选渲染
                        // 是否处理过
                        if (!hasMultiSelect) {
                            $('select[name="roleUserList"]').bootstrapDualListbox({
                                showFilter : false,
                                moveOnSelect : false,
                                infoText : false
                            })
                            hasMultiSelect = true;
                        } else {
                            $('select[name="roleUserList"]').bootstrapDualListbox('refresh',true);
                        }
                    } else {
                        showMessage("加载角色用户数据",result.msg,false);
                    }
                }
            })
        }

        // 保存角色对应的用户
        $('.saveRoleUser').click(function (e){
            e.preventDefault();
            // 判断roleId
            if (lastRoleId == -1 ) {
                showMessage("保存角色与用户的关系","请在左侧选择需要操作的角色",false);
                return;
            }

            $.ajax({
                url : getDomain() + '/sys/role/changeUsers.json',
                data : {
                    roleId : lastRoleId,
                    userIds : $('#roleUserList').val() ? $('#roleUserList').val().join(",") : ''
                },
                type : 'post',
                success : function (result) {
                    if (result.ret) {
                        showMessage("保存角色与用户的关系","操作成功",true);
                    } else {
                        showMessage("保存角色与用户的关系",result.msg,false);
                    }
                }
            });
        });
    });

</script>
</body>
</html>
